<template lang="pug">
  .data-screening
    //- span.goback(@click="goback") 返回
    //- chinaMap.china-map(v-if="isChinaMap" ref="map" :chinaMapData="chinaMapData" @change-map="changeMap")
    provinceMap.china-map(:mapName="mapName" ref="map" :value="chinaMapData" :level="level" :geoCoordMap="geoCoordMap" @change-data="changeData")
    .charts-title
      | 一体化灵活用工数据统计平台
      span.back-btn(v-if="level" @click="gobackChina")
        Icon(type="ios-arrow-dropleft-circle")
        | 返回全国地图
      span.back-btn(v-else @click="logout")
        Icon(type="md-power")
        | 退出登录
      fullscreen.fullscreen(v-model="isFullscreen" style="margin-right: 10px;")
    .top-box
      .title
        span 累计账单金额
      .remark ( 全国可交付城市：<i>{{payCusCount}}</i>个，开票总数：<i>{{invoiceCount}}</i>单，开票金额：<i>{{invoiceTotal}}</i>元 )
      .box-item.mt-15
        ul.number-ul
          li(:class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
          v-for="(item,index) in sum"
          :key="index")
            span(v-if="!isNaN(item)")
              i(ref="numberItem") {{item}}
            span(class="comma" v-else) {{item}}
            //- span(class="comma") {{item}}
    .left-box
      .item
        .shebao
          .item-title {{titleName}}社保费用统计
          shebao(:shebaoData="shebaoData" :mapDataName="mapDataName")
          //- shebao(v-if="shebaoData && shebaoData.length" :shebaoData="shebaoData" :mapDataName="mapDataName")
          //- .no-data(v-else) 暂无数据
      .item
        .gongjijin
          .item-title {{titleName}}公积金费用统计
          gongjijin(:gongjijinData="gongjijinData" :mapDataName="mapDataName")
          //- gongjijin(v-if="gongjijinData && gongjijinData.length" :gongjijinData="gongjijinData" :mapDataName="mapDataName")
          //- .no-data(v-else) 暂无数据
      .item
        .shebao
          .item-title {{titleName}}商保费用统计
          shangbao(:shangbaoData="shangbaoData" :mapDataName="mapDataName")
          //- shangbao(v-if="shangbaoData && shangbaoData.length" :shangbaoData="shangbaoData" :mapDataName="mapDataName")
          //- .no-data(v-else) 暂无数据
      .item
        .gongjijin
          .item-title {{titleName}}薪资费用统计
          xinzi(:xinziData="xinziData" :mapDataName="mapDataName")
          //- xinzi(v-if="xinziData && xinziData.length" :xinziData="xinziData" :mapDataName="mapDataName")
          //- .no-data(v-else) 暂无数据
    .right-box
      .item.h-p-50
        change(:changeList="changeList")
      .item
        zhangdan(:billLog="billLog")
      .item
        kaipiao(:invoiceLog="invoiceLog")
    .bottom-box
      .item
        .img-box
          img(src="@/assets/images/data-screening/kehu.png")
          //- span.text 服务客户(家)
        .number {{cusCount}}
      .item
        .img-box
          img(src="@/assets/images/data-screening/daili.png")
          //- span.text 人事代理(家)
        .number {{cusAgentCount}}
      .item
        .img-box
          img(src="@/assets/images/data-screening/paiqian.png")
          //- span.text 劳务派遣(家)
        .number {{cusLaborDispatchCount}}
      .item
        .img-box
          img(src="@/assets/images/data-screening/waibao.png")
          //- span.text 劳务外包(家)
        .number {{cusOutsourcingCount}}
      .item
        .img-box
          img(src="@/assets/images/data-screening/yuangong.png")
          //- span.text 服务员工(人)
        .number {{empCount}}
</template>

<script>
import echarts from 'echarts'
import Fullscreen from './fullscreen'
import dashBoardApi from '@/api/DashBoard.api.js'
import chinaMap from './modal/china.vue'
import provinceMap from './modal/province.vue'
import shebao from './modal/shebao.vue'
import gongjijin from './modal/gongjijin.vue'
import shangbao from './modal/shangbao.vue'
import xinzi from './modal/xinzi.vue'
import change from './modal/change.vue'
import zhangdan from './modal/zhangdan.vue'
import kaipiao from './modal/kaipiao.vue'
import Cookies from 'js-cookie'
// const setHtmlFontSize = () => {
//    let designSize = 1920; // 设计图尺寸

//   let html = document.documentElement;

//   let wW = html.clientWidth;// 窗口宽度
//   let rem = wW * 100 / designSize; 

//   document.documentElement.style.fontSize = rem + 'px';
// };
// window.onresize = setHtmlFontSize;
// setHtmlFontSize()
export default {
  name: 'data-screening',
  components: {
    Fullscreen,
    chinaMap,
    shebao,
    gongjijin,
    shangbao,
    xinzi,
    change,
    zhangdan,
    kaipiao,
    provinceMap
  },
  data () {
    return {
      geoCoordMap: [],
      level: 0,
      provinceList: [],
      mapDataName: '中国',
      isFullscreen: false,
      timer: null,
      isChinaMap: true,
      chinaMapData: [], // 全国数据
      provinceData: [], // 省份数据
      mapName: 'china',
      cusCount: 0,
      cusAgentCount: 0,
      cusLaborDispatchCount: 0,
      cusOutsourcingCount: 0,
      empCount: 0,
      payCusCount: 0, // 可交付城市
      invoiceCount: 0, // 开票单数
      invoiceTotal: 0, // 开票总金额
      sum: [],
      newNumber: 0,
      shebaoData: [],
      gongjijinData: [],
      shangbaoData: [],
      xinziData: [],
      changeList: [], // 异动日志
      billLog: [], // 账单日志
      invoiceLog: [] // 发票日志
    }
  },
  created () {
    this.getBillTotal()
    this.getCustomerEmployeeChange()
    this.getMapInfo()
    this.getMapBill()
    this.provinceList = JSON.parse(localStorage.getItem('provinceList'))
  },
  computed: {
    titleName () {
      return this.mapDataName === '中国'? '全国' : this.mapDataName
      // return this.mapDataName === '中国'? '全国' : '全国'
    }
  },
  mounted () {
    // console.log(this.newNumber)
    // this.toOrderNum(this.newNumber)
    // this.setNumberTransform()
    this.increaseNumber()
    console.log(this.format_number(this.newNumber))
  },
  methods: {
    format_number(n){  
      let b = parseInt(n).toString()
      let len = b.length
      if (len <= 3) {return b}
      let r = len % 3
      return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(","); 
    },  
    increaseNumber () {
      let self = this
      this.timer = setInterval(() => {
        // this.changeList.push(this.getRandomNumber())
        // self.getBillTotal()
        self.GetBillList()
        self.GetInvoiceList()
        self.getCustomerEmployeeChange()
        self.newNumber = self.newNumber + self.getRandomNumber()
        self.toOrderNum(self.newNumber)
        // self.setNumberTransform()
        console.log(1111)
      }, 60000)

      this.timer2 = setInterval(() => {
        console.log('00000000000000000')
        self.getBillTotal()
      }, 10000)
    },
    setNumberTransform () {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.sum.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示账单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
    toOrderNum(num) {
      num = num.toString()
        let arr = this.format_number(num)
        this.sum = arr.split('') // 将其便变成数据，渲染至滚动数组
    },
    getRandomNumber () {
      return Math.floor(Math.random() * (50 - 1 + 1) + 1)
    },
    queryCP () {
      // 返回有数据的省份名字，存为数组
      // var cityNameArr = []
      // this.chinaData.map(item => {
      //   cityNameArr.push(item.name)
      // })

      // 有数据的省份赋地理经纬度      
      let geoCoordMap = []
      let mapFeatures = echarts.getMap(this.mapName).geoJson.features
      console.log('this.chinaMapData: ', this.chinaMapData)
      let cityname = this.chinaMapData.map(item => {
        // return item.areaName
        if (this.level === 0) {
          if (['内蒙古', '黑龙江'].indexOf(item.areaName.substring(0, 3)) != -1) {
            return item.areaName.substring(0, 3)
          } else {
            return item.areaName.substring(0, 2)
          }
        } else {
          return item.areaName
        }
      })
      mapFeatures.forEach(v => {
        let tempObj = {
          name: v.properties.name, // 地区名称
          value: v.properties.cp // 经纬度
        }
        if (cityname.indexOf(v.properties.name) !== -1) {
          geoCoordMap.push(tempObj)
        }
      })
      this.geoCoordMap = geoCoordMap
      console.log(this.geoCoordMap)
    },
    // 获取区域信息
    getMapInfo () {
      dashBoardApi.GetMapInfo({
        name: this.mapDataName,
        flag: this.level
      }).then(res => {
        let name = ''
        if (this.level === 0) {
          this.chinaMapData = res.data.data.map(item => {
            if (['内蒙古', '黑龙江'].indexOf(item.areaName.substring(0, 3)) != -1) {
              name = item.areaName.substring(0, 3)
            } else {
              name = item.areaName.substring(0, 2)
            }
            return {
              ...item,
              name: name,
              value: item.companyCount
            }
          })
          this.queryCP()
        } else {
          this.chinaMapData = res.data.data.map(item => {
            return {
              ...item,
              name: item.areaName,
              value: item.companyCount
            }
          })
          this.queryCP()
        }
      })
    },
    // 区域账单
    getMapBill () {
      dashBoardApi.GetMapBill({
        name: this.mapDataName,
        flag: this.level
      }).then(res => {
        console.log(res)
        this.shebaoData = []
        this.gongjijinData = []
        this.shangbaoData = []
        this.xinziData = []
        if (res.data.success && res.data.data) {
          res.data.data.forEach(_ => {
            switch(_.category) {
              case 1:
                this.shebaoData.push(_)
                break;
              case 2:
                this.gongjijinData.push(_)
                break;
              case 4:
                this.shangbaoData.push(_)
                break;
              case 8:
                this.xinziData.push(_)
                break;
            }
          })
        }
        console.log(this.shangbaoData)
      })
    },
    // 获取 累计账单
    getBillTotal () {
      dashBoardApi.GetBillTotal({
        name: this.mapDataName,
        flag: this.level
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.newNumber = Math.round(res.data.data.billAmount)
          console.log(this.newNumber)
          // this.newNumber = self.newNumber + this.getRandomNumber()
          this.billLog = res.data.data.billLog
          this.invoiceLog = res.data.data.invoiceLog
          this.invoiceCount = res.data.data.invoiceCount
          this.invoiceTotal = res.data.data.invoiceTotal
          this.toOrderNum(this.newNumber)
          // this.setNumberTransform()
        }
      })
    },
    // 获取 客户账单
    getBillList () {
      dashBoardApi.GetBillList({
        name: this.mapDataName,
        flag: this.level
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.newNumber = Math.round(res.data.data.billAmount)
          console.log(this.newNumber)
          // this.newNumber = self.newNumber + this.getRandomNumber()
          this.billLog = res.data.data.billLog
          this.invoiceLog = res.data.data.invoiceLog
          this.invoiceCount = res.data.data.invoiceCount
          this.invoiceTotal = res.data.data.invoiceTotal
          this.toOrderNum(this.newNumber)
          // this.setNumberTransform()
        }
      })
    },
    // 获取 开票信息
    getInvoiceList () {
      dashBoardApi.GetInvoiceList({
        name: this.mapDataName,
        flag: this.level
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.newNumber = Math.round(res.data.data.billAmount)
          console.log(this.newNumber)
          // this.newNumber = self.newNumber + this.getRandomNumber()
          this.billLog = res.data.data.billLog
          this.invoiceLog = res.data.data.invoiceLog
          this.invoiceCount = res.data.data.invoiceCount
          this.invoiceTotal = res.data.data.invoiceTotal
          this.toOrderNum(this.newNumber)
          // this.setNumberTransform()
        }
      })
    },
    // 获取异动
    getCustomerEmployeeChange () {
      dashBoardApi.GetCustomerEmployeeChange().then(res => {
        console.log(res)
        if (res.data.success) {
          this.changeList = res.data.data.addReduceLog
          this.cusCount = res.data.data.cusCount
          this.cusAgentCount = res.data.data.cusAgentCount
          this.cusLaborDispatchCount = res.data.data.cusLaborDispatchCount
          this.cusOutsourcingCount = res.data.data.cusOutsourcingCount
          this.empCount = res.data.data.empCount
          this.payCusCount = res.data.data.payCusCount
        }
      })
    },
    changeData (val) {
      this.geoCoordMap = []
      console.log(val)
      this.level = val.level
      this.mapName = val.mapName
      let _obj = this.provinceList.find(item => {
        if (item.name.indexOf(this.mapName) > -1) {
          return item.name 
        }
      })
      this.mapDataName = _obj.name
      console.log(this.mapDataName)
      // this.getCity()
      this.getMapBill()
      this.getMapInfo()
    },
    gobackChina () {
      // this.isChinaMap = true
      this.mapDataName = '中国'
      this.mapName = 'china'
      this.level = 0
      this.getMapBill()
      this.getMapInfo()
      this.$refs.map.initEcharts('china', 100)
    },
    goback () {
      this.$router.go(-1)
    },
    logout () {
      Cookies.set('clientToken', '')
      localStorage.clear()

      this.$router.push({
        // name: 'login',
        path: '/login',
        name: 'login',
        query: {
          viewData: true
        }
      })
    },
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.timer2)
  }
}
</script>

<style lang="less" scoped>
  .data-screening{ 
    // zoom: 75%;
    background:url('./modal/BG.png');
    background-size:cover;
    position: relative;
    width: 100%;
    height: 100%;
    .china-map{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .goback{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
    }
    .charts-title{
      position: absolute;
      top: 0px;
      left: 0;
      padding-top: .1rem;
      padding-bottom: .15rem;
      width: 100%;
      z-index: 9;
      text-align: center;
      font-size: .24rem;
      color: #0bafe5;
      font-weight: bold;
      letter-spacing: .03rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: 0px 0px;
      background-image: url('../../assets/images/data-screening/title-bg.png');
      span.back-btn{
        position: absolute;
        top: .06rem;
        left: .16rem;
        font-size: .14rem;
        cursor: pointer;
      }
      .fullscreen{
        position: absolute;
        top: .06rem;
        right: .14rem;
        z-index: 99;
        font-size: .14rem;
      }
    }
    .top-box{
      position: absolute;
      top: .70rem;
      left: 4.8rem;
      right: 4.8rem;
      z-index: 9;
      text-align: center;
      opacity: .9;
      >.title{
        font-size: .18rem;
        color: #0bafe5;
        span{
          position: relative;
          &:before{
            content: '';
            position: absolute;
            top: 50%;
            left: -0.27rem;
            width: .15rem;
            height: 1px;
            background-color: #0bafe5;
          }
          &:after{
            content: '';
            position: absolute;
            top: 50%;
            right: -0.27rem;
            width: .15rem;
            height: 1px;
            background-color: #0bafe5;
          }
        }
      }
      >.remark{
        color: #fff;
        font-size: .12rem;
        >i{
          color: #ffd400;
        }
      }
      .box-item {
        position: relative;
        .number-ul{
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, 0);
          height: .52rem;
          font-size: .36rem;
          // line-height: 41px;
          text-align: center;
          list-style: none;
          color: #ffd400;
          display: flex;
          // writing-mode: vertical-lr;
          // text-orientation: upright;
          &:after{
            content: '元';
            font-size: .18rem;
            color: #0bafe5;
            position: absolute;
            top: .23rem;
            right: -0.28rem;
          }
          .mark-item {
            width: .10rem;
            height: .55rem;
            margin-right: .05rem;
            // line-height: .10rem;
            position: relative;
            & > span {
              // position: absolute;
              width: 100%;
              // bottom: 0;
              // writing-mode: vertical-rl;
              // writing-mode: rl-tb;
              // text-orientation: upright;
            }
          }
          .number-item {
            width: .44rem;
            height: .55rem;
            background: url('../../assets/images/data-screening/shuzi.png') no-repeat center center;
            background-size:100% 100%;
            list-style: none;
            margin-right: .05rem;
            & > span {
              position: relative;
              display: inline-block;
              margin-right: .10rem;
              width: 100%;
              height: .48rem;
              // writing-mode: vertical-rl;
              // writing-mode: rl-tb;
              // text-orientation: upright;
              overflow: hidden;
              // & > i {
              //   // font-style: normal;
              //   // position: absolute;
              //   // top: 0.07rem;
              //   // left: 50%;
              //   // transform: translate(-50%, 0);
              //   // transition: transform 1s ease-in-out;
              //   // letter-spacing: .10rem;
              //   // writing-mode: vertical-rl;
              // // writing-mode: rl-tb;
              // // text-orientation: upright;
              // }
            }
            &:last-child{
              margin-right: 0;
            }
          }
        }
      }
    }
    .left-box{
      position: absolute;
      top: 0.52rem;
      left: 0.1rem;
      width: 4.5rem;
      bottom: .2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 9;
      .item{
        width: 100%;
        padding: 5px 0;
        // height: 2.14rem;
        height: 25%;
        &.h-p-50{
          height: 50%;
        }
        >div{
          position: relative;
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          >.item-title{
            position: absolute;
            top: 0.1rem;
            left: 50%;
            transform: translate(-50%, 0);
            color: #0bafe5;
            font-size: 0.12rem;
            line-height: 0.12rem;
            font-weight: bold;
          }
          >.no-data{
            width: 100%;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            font-size: 24px;
            font-weight: 100;
            color: #0bafe5;
          }
          &.shebao{
            background-image: url('../../assets/images/data-screening/xx-bg-al.png');
          }
          &.gongjijin{
            background-image: url('../../assets/images/data-screening/xx-bg-bl.png');
          }
        }
      }
    }
    .right-box{
      position: absolute;
      top: 0.52rem;
      right: 0.1rem;
      width: 4.5rem;
      bottom: .2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 9;
      .item{
        width: 100%;
        padding: 5px 0;
        height: 25%;
        &.h-p-50{
          height: 50%;
        }
        >div{
          position: relative;
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          // &.shebao{
          //   background-image: url('../../assets/images/data-screening/xx-bg.png');
          // }
          // &.zjy-xx{
          //   background-image: url('../../assets/images/data-screening/zjy-bg.png');
          // }

        }
      }
    }
    .bottom-box{
      position: absolute;
      bottom: .2rem;
      right: 4.8rem;
      left: 4.8rem;
      z-index: 9;
      height: 1.50rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item{
        .img-box{
          width: 1.2rem;
          height: 1.2rem;
          position: relative;
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          span.text{
            display: inline-block;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: .3rem;
            left: 0;
            font-size: .12rem;
            color: #fff;
          }
        }
        .number{
          text-align: center;
          font-size: .24rem;
          color: #fff;
          font-weight: 100;
        }
      }
    }
  }
</style>
